<template>
	<view>
		<view class="balance">
			<view class="top u-flex">
				<view class="money"><text>￥</text><text>{{ userInfo.money || '0.00' }}</text><text style="margin-left: 5rpx;">元</text></view>
				<view class="title">余额</view>
			</view>
		</view>
		<view class="bot u-flex">
			<view @tap="jump('/pages/index/wallet/detail')" class="btn1 u-flex">明细</view>
			<view @tap="jump('/pages/index/wallet/withdraw')" class="btn2 u-flex">提现</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
	export default {
		data() {
			return {

			}
		},
		methods: {
      jump(path, query) {
        this.$Router.push({
          path: path,
          query: query
        });
      },
		},
    computed: {
      ...mapGetters(['userInfo'])
    },
	}
</script>

<style>
	page {
		background: #ffffff !important;
	}
</style>
<style lang="scss" scoped>
	.balance {
		height: 290rpx;
		background: black;
	}

	.top {
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}

	.money {
		font-size: 40rpx;
	}

	.title {
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	.bot{
		margin-top: 120rpx;
		justify-content: center;
	}
	.btn1{
		width: 170rpx;
		height: 64rpx;
		background: #F5F5F5;
		border-radius: 4rpx;
		align-items: center;
		justify-content: center;
	}
	.btn2{
		width: 170rpx;
		height: 64rpx;
		background: #010100;
		border-radius: 4rpx;
		margin-left: 30rpx;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}
</style>
